<template>
  <div class="swiper-parrent-box" ref="swiperParrent">
    <div class="boxs-top">
      <titles :title="props.info.text" />
      <div class="subTitle" v-if="props.info.subTitle">——{{ props.info.subTitle }}</div>
    </div>
    <div class="boxs-dirction">
      <textMax v-if="props.info.remarks" :data="props.info.remarks" :maxLen="98" />
    </div>
    <div class="banner-parent">
      <div
        class="arrow-box-left"
        :style="{
          opacity: current === 0 ? '0.3' : '1',
        }"
      >
        <div
          class="arrow-box"
          :style="{
            backgroundColor: store.styleInfo.shmentColor,
          }"
          style="cursor: pointer"
        >
          <arrowLeft @click="addCruuent(1)" />
        </div>
      </div>
      <div class="swiper-item-boxs">
        <div
          class="swiper-item-boxs-img"
          v-for="(item, index) in props.info.children"
          :key="index"
          :style="{
            // zIndex: `${10 - Math.abs(current - index)}`,
            // left: `${120 * index}px`,
          }"
          style="cursor: pointer"
          @click="pathChild(props.info, index)"
          :class="{
            'wiper-item-boxs-img5': index >= current + 3,
            'wiper-item-boxs-img4': index === current + 2,
            'wiper-item-boxs-img3': index === current + 1,
            'wiper-item-boxs-img2': index === current,
            'wiper-item-boxs-img1': index === current - 1,
            'wiper-item-boxs-img0': index === current - 2,
            'wiper-item-boxs-img6': index <= current - 3,
          }"
        >
          <img
            v-if="item.value"
            style="width: 780px; height: 482px"
            class="swiper-item-boxs-img-pic"
            :src="
              item.value
                ? urls + item.value + '?imageView2/1/w/780/h/482/format/webp'
                : 'http://101.34.143.36:8890/api/image/387939155165253/h_482,w_780'
            "
            alt=""
          />
          <div v-else style="width: 780px; height: 482px" class="swiper-item-boxs-img-pic">
            <UnitImageNull></UnitImageNull>
          </div>
          <div class="shadow"></div>
          <div class="textBox">
            <div class="titleText">
              <span class="title">{{ item.text }}</span>
            </div>
            <div class="line"></div>
            <div class="subTitle unit-subTitle" v-if="item.subTitle">——{{ item.subTitle }}</div>
            <span class="left-title1" :style="{}">{{ item.remarks }}</span>
          </div>
        </div>
        <div class="page">
          {{ current + 1 < 10 ? '0' + (current + 1) : current + 1 }}/{{
            props.info.children.length < 10 ? '0' + props.info.children.length : props.info.children.length
          }}
        </div>
      </div>

      <div class="arrow-box-right">
        <div
          class="arrow-box"
          :style="{
            backgroundColor: store.styleInfo.shmentColor,
            opacity: current === props.info.children.length - 1 ? '0.3' : '1',
          }"
          style="cursor: pointer"
        >
          <arrowRight @click="addCruuent(2)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { pathList, pathListLoop } from '../route';
import arrowLeft from '../publicComponents/components/arrowLeft.vue';
import arrowRight from '../publicComponents/components/arrowRight.vue';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import textMax from './component/textMax2.vue';
import { ref, onMounted } from 'vue';
// import { handlemouse } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const router = useRouter();
const route = useRoute();
const current = ref(0);
const swiperParrent = ref(null);
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
});

// const page = ref(1)
const addCruuent = (e: number) => {
  if (e === 2) {
    if (current.value == props.info.children.length - 1) {
      return;
    } else {
      current.value = current.value + 1;
    }
  } else {
    if (current.value == 0) {
      return;
    } else {
      current.value = current.value - 1;
    }
  }
};
const pathChild = (e: any, index) => {
  store.setchildModel(e);
  store.setCurrent(index);
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { current: index, childId: props.info.id },
  });
};
onMounted(() => {
  // handlemouse('boxs-content-scroll');
  animation1();
});
const animation1 = () => {
  const observer = new IntersectionObserver((entries) => {
    let canTrigger = true; // 标记是否可以触发
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码
        swiperParrent.value.classList.add('animation-box');
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (swiperParrent.value) {
        //   swiperParrent.value.classList.remove('animation-box');
        // }
      }
    });
  });
  observer.observe(swiperParrent.value);
};
</script>

<style scoped lang="less">
@import './index.less';
.swiper-parrent-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 792px;
}
.boxs-dirction {
  width: 70%;
  margin-bottom: 50px;
  :deep(.tj) {
    line-height: 32px;
  }
}
.banner-parent {
  width: 1180px;
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 80px;
  // margin-top: 40px;
}
.arrow-box-left {
  width: 100px;

  cursor: pointer;
  position: absolute;
  left: -87px;
  top: 200px;
}
.arrow-box-left:hover {
  opacity: 0.7;
}
.arrow-box-right:hover {
  opacity: 0.7;
}
.arrow-box-right {
  width: 100px;
  cursor: pointer;
  position: absolute;
  right: -132px;
  top: 200px;
}
.heards-banner {
  width: 1160px;
  height: 435px;
  margin-top: 50px;
}
.swiper-item-boxs {
  width: 1180px;
  height: 520px;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
}
.swiper-item-boxs-img {
  position: absolute;
  width: 780px;
  height: 482px;
  left: -800px;
  z-index: -1;
  overflow: hidden;
  transition: all 0.5s;
  // left: 50%;
  // transform: translateX(-50%);
}
.tdesign-demo-block--swiper {
  width: 100%;
  height: 100%;
}
.boxs-top {
  margin-bottom: 20px;
}
.wiper-item-boxs-img0 {
  transform: scale(0.6);
  // width: 630px;
  // height: 390px;
  left: -158px;
  // top: 46px;
  z-index: 6;
}
.wiper-item-boxs-img1 {
  transform: scale(0.8);
  // width: 702px;
  // height: 434px;
  left: 0px;
  // top: 24px;
  z-index: 8;
}
.wiper-item-boxs-img2 {
  width: 780px;
  height: 482px;
  transform: scale(1);
  left: 200px;
  z-index: 10;

  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
}
.wiper-item-boxs-img3 {
  transform: scale(0.8);
  // width: 702px;
  // height: 434px;
  left: 398px;
  // top: 24px;
  z-index: 8;
}
.wiper-item-boxs-img4 {
  transform: scale(0.6);
  // width: 630px;
  // height: 390px;
  left: 557px;
  // top: 46px;
  z-index: 6;
}
.wiper-item-boxs-img6 {
  transform: scale(0.4);
  // width: 630px;
  // height: 390px;
  left: -290px;
  // top: 46px;
  z-index: -1;
}
.wiper-item-boxs-img5 {
  transform: scale(0.4);
  // width: 630px;
  // height: 390px;
  left: 655px;
  // top: 46px;
  z-index: -1;
}

.swiper-item-boxs-img img {
  transition: all 0.5s;
}
.shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;
}
.swiper-item-boxs-img:hover .shadow {
  background: rgba(0, 0, 0, 0.4);
}
.swiper-item-boxs-img:hover img {
  transform: scale(1.1);
}
.swiper-item-boxs-img:hover .textBox {
  transform: translateY(0);
}
.line {
  width: 0px;
  height: 2px;
  background: #000;
  transform: all 0.5s;
  // margin-bottom: 15px;
}
.textBox {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 101;
  color: #fff !important;
  text-align: center;
  transform: translateY(100%);
  transition: all 0.5s;
  .title {
    font-size: 20px;
    font-weight: normal;
    font-family: SourceHanSerifCN-Bold;
  }
  .left-title1 {
    width: 640px;
    margin: auto;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /* 控制最大行数 */
    margin-bottom: 56px;
    font-size: 16px;
    margin-top: 15px;
    // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  }
}
.page {
  position: absolute;
  top: 500px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.3;
  font-size: 14px;
  line-height: 22px;
  color: #000000;
}
.arrow-box {
  width: 48px;
  height: 48px;
  background: #000;
  border-radius: 50%;
  :deep(.iconfonts) {
    color: #fff !important;
  }
}
.swiper-item-boxs-img-pic {
  object-fit: cover;
}
.subTitle {
  text-align: center;
}
.unit-subTitle {
  color: #fff;
}
</style>
